<template>
  <div class="side">
      <div class="side-item" v-for="(item,i) in sideList" :key="`side-${i}`" @click="$utils.scrollIntoView(item.targetId)">
          {{$t(item.name)}}
      </div>
  </div>
</template>

<script>
export default {
  name:'SideBar',
  created(){
    this.sideList = [
      {
        name:'限时秒杀',
        targetId:'Seckill',
        icon:''
      },
      {
        name:'新品首发',
        targetId:'NewProduct',
        icon:''
      },   {
        name:'品牌直营',
        targetId:'Brand',
        icon:''
      },
       {
        name:'猜你喜欢',
        targetId:'GuessLike',
        icon:''
      },
       {
        name:'返回顶部',
        targetId:'Search',
        icon:''
      }
    ]
  }
}
</script>

<style lang="scss" scoped>
.side{
  position: fixed;
  right:0;
  bottom: 15%;
  width:70px;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 20px -10px rgba(0,0,0,0.06);
  z-index:1000;
  &-item{
    height: 70px;
    margin: 0 8px;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid #eee;
    font-size: 12px;
  }
  &-item:last-child{
    border-bottom: none;
  }
}
</style>
